<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="user" label="用户" width="">
        <template slot-scope="scope">
          <div class="user">
            <el-avatar :size="50" :src="scope.row.user.avatar" />
            <span style="width: 150px">{{ scope.row.user.nickname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="user.username" label="联系电话" width="" />
			<el-table-column prop="info.real_name" label="真实姓名" width="100" />
      <el-table-column prop="info.id_card" label="身份证号" width="200" />
      <el-table-column prop="info.card_no" label="银行卡号" width="200" />
      <el-table-column prop="info.bank" label="所属银行" width="100" />
      <el-table-column prop="amount" label="金额" width="" />
      <el-table-column prop="created_at" label="申请时间" width="" sortable />
      <el-table-column prop="updated_at" label="处理时间" width="" sortable />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="check" @click="checkReason(scope)">查看拒绝理由</span>
          <span class="delete" @click="handleDelete(scope)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <no-pass ref="noPass" :disabled="true" :remark="remark" />
  </div>
</template>
<script>
import NoPass from './noPass'
import { deleteCashItem } from '@/api/cash'
const ERR_OK = 200
export default {
  components: {
    NoPass
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      remark: ''
    }
  },
  methods: {
    handleDelete(scope) {
      this._deleteCashItem(scope.row.id)
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    checkReason(scope) {
      this.$refs.noPass.show()
      this.remark = scope.row.remark
    },
    _deleteCashItem(id) {
      return deleteCashItem(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success',
              showClose: true
            })
          }
          return Promise.resolve()
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .check {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .delete {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell{
  .el-avatar{
    margin-right: 15px;
  }
}
.user{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
